<template>
	<view class="release">
		<view class="release-field">
			发布到 <view class="release-place">广场</view>
		</view>
		<view class="release-content">
			<textarea name="" id="" cols="30" rows="10" placeholder="发布你的想法,  记录一下哦" v-model="value"></textarea>
		</view>
		<view class="upload-container">
			<van-uploader :file-list="fileList" @after-read="afterRead" :deletable="true" />
		</view>
		
		<view class="submit-wrapper">
			<view class="submit-btn" @click="releaseDynamic">
				发布
			</view>
		</view>
	</view>
</template>

<script>
	import { baseUrl } from "../../api/consts.js"
	import api from "../../api/api.js"
	export default {
		data() {
			return {
				fileList: [],
				value: ""
			}
		},
		methods: {
			/**
			 * 图片上传完成后的事件
			 * @param {Object} e
			 */
			afterRead(e) {
				const { file } = e.detail
				console.log(file)
				uni.uploadFile({
					url: `${baseUrl}/Picture/addUrl`, //仅为示例，非真实的接口地址
					filePath: file.url,
					name: 'file',
					formData: {},
					success: (uploadFileRes) => {
						const res = JSON.parse(uploadFileRes.data)
						if(res.code === 200){
							this.fileList.push({
								url: res.data
							})
							console.log("this.fileList: ",this.fileList);
						}
					}
				});
			},
			async releaseDynamic() {
				const res = await api.dynamic.releaseDynamic({
					words: this.value
				})
				if(res.code === 200){
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.release{
	padding: 0 16rpx;
	box-sizing: border-box;
	.release-field{
		padding: 32rpx 0;
		border-bottom: 1rpx solid #e7e7e7;
		box-sizing: border-box;
		margin-bottom: 32rpx;
		color: #999;
		.release-place{
			display: inline-block;
			font-size: 36rpx;
			color: #000;
			font-weight: 600;
			margin-left: 16rpx;
		}
	}
	
	.upload-container{
		/deep/ .van-uploader{
			.van-uploader__upload{
				display: flex;
				    justify-content: center;
				    align-items: center;
				    background: #e7e7e
			}
		}
	}
	
	.submit-wrapper{
		height: 80rpx;
		width: 100%;
		margin-top: 100rpx;
		.submit-btn{
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
			background-color: #0CAC42;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			word-spacing: 2;
		}
	}
}
</style>
